<template>
    <div class="talk-section p-t-55">
        <div class="talk-box">
            <div class="comment-box">
                <div class="comment-wrap">
                    <h2 class="comment-title">
                        <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#34495e">
                            <path
                                d="M906.68 436.31v180.51c0 80.71-48.86 146.36-108.9 146.36H431.94v19.18c0 47.43 28.88 86.23 64.17 86.23h269.13l33.24 91.62 33.24-91.62h63.45c35.29 0 64.17-38.81 64.17-86.23V521c-0.01-42.17-22.83-77.33-52.66-84.69z"
                            ></path>
                            <path
                                d="M888.06 606.91V198.58c0-74.09-45.11-134.71-100.24-134.71H164.45c-55.13 0-100.24 60.62-100.24 134.71v408.33c0 74.09 45.11 134.71 100.24 134.71h99.11l51.92 143.13 51.92-143.13h420.42c55.18 0 100.24-60.62 100.24-134.71z m-632.5-169.46a53.35 53.35 0 1 1 53.35-53.35 53.35 53.35 0 0 1-53.35 53.35z m221.38 0a53.35 53.35 0 1 1 53.36-53.35 53.35 53.35 0 0 1-53.35 53.35z m221.39 0a53.35 53.35 0 1 1 53.35-53.35 53.35 53.35 0 0 1-53.35 53.35z"
                            ></path>
                        </svg>

                        留言板
                    </h2>
                    <ol class="comment-list">
                        <li class="comment-item" v-for="item in list" :key="item.id">
                            <div class="comment-avatar">
                                <img src="@/assets/image/default.png" v-if="!item.master" />
                                <img src="@/assets/image/avatar.jpeg" v-if="item.master" />
                            </div>
                            <div class="comment-content">
                                <div class="comment-original">
                                    <div class="comment_hd">
                                        <div class="comment_info">
                                            <div class="name">
                                                <p>
                                                    <el-icon><Avatar /></el-icon>
                                                    {{ item.name }}
                                                    {{ item.master == 1 ? '(博主)' : '' }}
                                                </p>
                                            </div>
                                            <div class="time">
                                                <el-icon><Clock /></el-icon>
                                                {{ formatTime(item.created_time) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment_bd">
                                        <p>{{ item.content }}</p>
                                    </div>
                                    <div class="comment_ft">
                                        <p @click="onReply(item)">
                                            <svg viewBox="0 0 1024 1024" width="15" height="15">
                                                <path
                                                    d="M1024 512C1024 229.236364 794.786909 0 512 0 229.259636 0 0 229.236364 0 512s229.236364 512 512 512c109.381818 0 210.501818-34.536727 293.701818-92.974545l167.121455 41.774545-41.774546-167.121455A509.137455 509.137455 0 0 0 1024 512z m-715.636364 73.681455a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454546 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454545 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z"
                                                ></path>
                                            </svg>
                                        </p>
                                    </div>
                                </div>
                                <ul class="comment-reply">
                                    <li
                                        class="comment-reply-item hvr-shadow"
                                        v-for="v in item.childrens"
                                        :key="v.id"
                                    >
                                        <div class="comment_hd">
                                            <div class="comment_info">
                                                <div class="name">
                                                    <p>
                                                        <el-icon><Avatar /></el-icon>
                                                        {{ v.name }}
                                                        {{ v.master == 1 ? '(博主)' : '' }}
                                                    </p>
                                                    <span>回复</span>
                                                    <p>
                                                        <el-icon><Avatar /></el-icon>
                                                        {{ v.reply_name }}
                                                        {{ v.reply_master == 1 ? '(博主)' : '' }}
                                                    </p>
                                                </div>
                                                <div class="time">
                                                    <el-icon><Clock /></el-icon>
                                                    {{ formatTime(v.created_time) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment_bd">
                                            <p>{{ v.content }}</p>
                                        </div>
                                        <div class="comment_ft">
                                            <p @click="onReply(v)">
                                                <svg viewBox="0 0 1024 1024" width="15" height="15">
                                                    <path
                                                        d="M1024 512C1024 229.236364 794.786909 0 512 0 229.259636 0 0 229.236364 0 512s229.236364 512 512 512c109.381818 0 210.501818-34.536727 293.701818-92.974545l167.121455 41.774545-41.774546-167.121455A509.137455 509.137455 0 0 0 1024 512z m-715.636364 73.681455a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454546 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454545 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z"
                                                    ></path>
                                                </svg>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ol>
                    <el-pagination
                        :currentPage="currentPage"
                        :page-size="pageSize"
                        :page-sizes="pageSizes"
                        small
                        background
                        :layout="layout"
                        :total="total"
                        hide-on-single-page
                        class="comment-pagination"
                        @current-change="handleCurrentChange"
                    />
                </div>
                <comment-editor ref="commentRef" @input="getContent">
                    <template v-slot:reply>
                        <div class="reply-wrap" v-show="reply">
                            <div class="post-reply">
                                <span>正在回复</span>
                                <span class="post-reply_name">
                                    {{ reply.name }}{{ reply.master == 1 ? '（博主）' : '' }}
                                </span>
                                <span>的评论：</span>
                            </div>
                            <div class="post-content">
                                <span>{{ reply.content }}</span>
                            </div>
                            <el-button round size="small" @click="onCancel"> 取消回复 </el-button>
                        </div>
                    </template>
                    <template v-slot:button>
                        <el-button round size="small" :loading="loading" @click="onSubmit">
                            提 交
                        </el-button>
                    </template>
                </comment-editor>
            </div>
            <aside class="aside-box">
                <div class="entry-wrap">
                    <div class="entry-title">
                        <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#34495e">
                            <path
                                d="M514 114.3c-219.9 0-398.8 178.9-398.8 398.8 0 220 178.9 398.9 398.8 398.9s398.9-178.9 398.9-398.9c-0.1-219.8-179-398.8-398.9-398.8zM448.1 686c36.6-283.6-18.2-198-25.9-185.1-0.2 0.3-0.5 0.1-0.5-0.2 35.5-157 197.2-114.1 176.7 4.6-49.6 287.7-7.9 212.8 5.2 171.6 0.3-1.1 2-0.7 1.8 0.4C584 855.8 428.8 835 448.1 686z m111.5-304.7c-40.6 8.9-80.7-16.8-89.6-57.4-8.9-40.6 16.8-80.7 57.4-89.6 40.6-8.9 80.7 16.8 89.6 57.4 8.9 40.6-16.8 80.7-57.4 89.6z"
                            ></path>
                        </svg>
                        留言须知
                    </div>
                    <div class="entry-content" v-html="talkInfo"></div>
                </div>
            </aside>
        </div>
        <layout-footer />
    </div>
</template>

<script>
import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
import talkService from '@/global/service/talkService.js';

export default {
    name: 'Talk',
    setup() {
        const { proxy } = getCurrentInstance();

        let id = 0;
        let loading = ref(false); //等待按钮
        // 表格
        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });
        // 表单
        let form = {
            content: '',
            name: '',
            mail: '',
            url: ''
        };
        let talkInfo = ref('');
        let reply = ref('');

        // 获取列表
        const getList = async () => {
            const { code, data } = await talkService.getList({
                page: table.currentPage, //查询第几页
                per_page: table.pageSize //每页多少条数据
            });
            if (code === 200) {
                table.list = data.list;
                table.total = data.total;
            }
        };
        // 获取留言须知
        const getDesc = async () => {
            const { code, data } = await talkService.getDesc();
            if (code === 200) {
                talkInfo.value = data.list.info;
            }
        };
        // 当前页
        const handleCurrentChange = (val) => {
            table.currentPage = val;
            getList();
        };
        // 回复
        const onReply = (obj) => {
            id = obj.id;
            reply.value = obj;

            const offsetTop = proxy.$jq('.comment-editor')[0].offsetTop;
            proxy.$jq('html,body').animate({ scrollTop: offsetTop }, 800);
        };
        // 取消回复
        const onCancel = () => {
            proxy.$refs.commentRef.$refs['formRef'].resetFields();
            reply.value = '';
            id = 0;
        };
        // 输入框
        const getContent = (obj) => {
            form = obj;
        };
        // 表单提交
        const onSubmit = async () => {
            loading.value = true;
            if (loading.value) {
                if (id) form.id = id;

                const { code, msg } = await talkService.add(form);

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getList();
                    onCancel();

                    loading.value = false;
                } else {
                    loading.value = false;
                }
            }
        };
        // 格式化时间戳
        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };

        getList();
        getDesc();

        return {
            ...toRefs(table),
            talkInfo,
            loading,
            handleCurrentChange,
            getContent,
            reply,
            onReply,
            onCancel,
            onSubmit,
            formatTime
        };
    }
};
</script>

<style lang="less">
.talk-section {
    .aside-box {
        .entry-wrap {
            background-color: rgba(255, 255, 255, 0.9);
            margin: 10px;
            padding: 20px;
            border-radius: 10px;
        }
        .entry-title {
            display: flex;
            align-items: center;
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 1rem !important;
            color: #34495e;
            font-weight: bold;
            svg {
                margin-right: 5px;
            }
        }
    }
}

@media (min-width: 800px) {
    .talk-box {
        display: flex;

        .comment-box {
            width: 66.66666667%;
        }
        .aside-box {
            width: 33.33333333%;
            .entry-wrap {
                position: fixed;
            }
        }
    }
}
</style>
